<template>
  <div class="packages">
      
    <div ref="refsTable">
      <!-- <div style="width: 100%;margin: auto;display: flex;flex-direction: column;align-items: center;">
      <div style="font-size: 30px;">pdf转图片</div>
      <div style="width: 800px;margin-top: 20px;">
        <div>
          选择pdf:
          <input type="file" ref="hiddenfile" accept="application/pdf" @change="handlePdf" class="hiddenInput" />
        </div>
      </div>
      <div v-for="(item, i) in imgFiles" :key="i" style="width:800px;position: relative;margin-top:10px;">
        <canvas :id="`pdf_canvas_${item}`" style="border: 1px solid #eeeeee;float:left;"></canvas>
      </div>
    </div> -->
      <el-form style="margin-top: 10px" label-width='68px' :inline="true">
        <el-form-item label="登记时间">
          <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss" @change="timeChange1" style="width:380px"
            :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="分析时间">
          <el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss" @change="timeChange2" style="width:380px"
            :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-autocomplete class="inline-input" v-model="params.projectTypeName" :fetch-suggestions="querySearch"
            placeholder="请选择" @select="handleSelectProject" @focus="change(1)" style="width:228px"
            clearable></el-autocomplete>
          <!-- <el-select v-model="params.projectType" placeholder="请选择" style="width:228px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in Arr.projectTypeArr" :key="item.id" :label="item.name"
              :value="item.id"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="样本类型">
          <el-autocomplete class="inline-input" v-model="params.sampleTypeName" :fetch-suggestions="querySearch"
            placeholder="请选择" @select="handleSelectSample" @focus="change(0)" style="width:228px"
            clearable></el-autocomplete>
          <!-- <el-select v-model="params.sampleType" placeholder="请选择" style="width:228px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in Arr.sampleTypeArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="核酸类型">
          <el-select v-model="params.nucleicAcidType" placeholder="请选择" style="width:228px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in Arr.nucleicAcidTypeArr" :key="item.id" :label="item.typeName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="条码号">
          <!-- <el-autocomplete class="inline-input" v-model="params.barcode" :fetch-suggestions="querySearch"
            placeholder="请输入条码号" @select="handleSelect" @focus="change(0)" style="width:228px"></el-autocomplete> -->
          <el-input clearable v-model="params.barcodeCode" style="width:228px" placeholder="请输入条码号"></el-input>
        </el-form-item>
        <el-form-item label="实验编号">
          <!-- <el-autocomplete class="inline-input" v-model="barcode" :fetch-suggestions="querySearch"
            placeholder="实验编号或流水号" @select="handleSelect" @focus="change(0)" style="width:228px"></el-autocomplete> -->
          <el-input clearable v-model="params.experimentNumber" style="width:228px" placeholder="实验编号或流水号"></el-input>
        </el-form-item>
        <el-form-item label="样本状态">
          <el-select v-model="params.subState" placeholder="请选择" style="width:228px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in arr.sampleStateArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" class="keywordCss">
          <!-- <el-autocomplete class="inline-input" v-model="keyword" :fetch-suggestions="querySearch" placeholder="请输入关键字"
            @select="handleSelect" @focus="change(1)" style="width:228px"></el-autocomplete> -->
          <el-input clearable v-model="params.keyword" style="width:228px"
            placeholder="送检单位/姓名/分析样本编号/分析批次号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true">
        <el-form-item>
          <el-button size="mini" type="primary" @click="returnBtn">回退</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 10px;float:right">
          <el-dropdown trigger="click" placement="bottom">
            <el-button size="mini" type="primary">
              导出
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleExport('now')">导出当前</el-dropdown-item>
              <el-dropdown-item @click.native="handleExport('all')">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item style="margin-left: 10px;float:right">
          <el-button size="mini" type="primary" @click="handleImport">导入</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" border :header-cell-style="{
        background: '#ebebeb'
      }" highlight-current-row :row-class-name="rowStyle" :height="heights" v-loading="loading">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
      <el-table-column width="120" align="center" label="条码号" prop="barcodeCode"></el-table-column>
      <el-table-column width="350" align="center" prop="projectTypeName" label="项目类型"
        show-overflow-tooltip></el-table-column>
      <el-table-column width="200" align="center" prop="experimentNumber" label="实验编号"></el-table-column>
      <el-table-column width="100" align="center" prop="mainState" label="样本状态">
        <template slot-scope="{row}">
          {{ mainStateObj[row.mainState] }}
        </template>
      </el-table-column>
      <el-table-column width="250" align="center" prop="analyzeSampleNumber" label="分析样本编号"></el-table-column>
      <el-table-column width="150" align="center" prop="analyzeBatchNumber" label="分析批次号"></el-table-column>
      <!-- <el-table-column width="150" align="center" prop="analyzeNumber" label="分析序号"></el-table-column> -->
      <el-table-column width="160" align="center" prop="registerCreateDate" label="录入时间"></el-table-column>
      <el-table-column width="160" align="center" prop="inputDate" label="入库日期"></el-table-column>
      <!-- <el-table-column width="160" align="center" prop="dnaReportDate" label="DNA报告日期">     
      </el-table-column>
      <el-table-column width="160" align="center" prop="rnaReportDate" label="RNA报告日期"></el-table-column> -->
      <el-table-column width="100" align="center" prop="name" label="受检者姓名"></el-table-column>
      <el-table-column width="100" align="center" prop="targetSex" label="受检者性别">
        <template slot-scope="{row}">
          {{ row.targetSex == 0 ? '未知' : (row.targetSex == 1 ? '男' : '女') }}
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" prop="targetAge" label="受检者年龄"></el-table-column>
      <!-- <el-table-column width="150" align="center" prop="name" label="样本类型大类"></el-table-column> -->
      <el-table-column align="center" prop="sampleTypeName" label="样本类型" width="150"></el-table-column>
      <!-- <el-table-column width="150" align="center" prop="name" label="样本类型小类"></el-table-column> -->
      <el-table-column align="center" prop="otherSampleTypes" label="其他样本类型" width="150"></el-table-column>
      <!-- <el-table-column width="150" align="center" prop="name" label="小类说明"></el-table-column> -->
      <!-- <el-table-column width="100" align="center" prop="mainState" label="检测流程">
        <template slot-scope="{row}">
          {{ mainStateObj[row.mainState] }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="nucleicTypeName" label="核酸类型" width="100"></el-table-column>
      <!-- <el-table-column width="150" align="center" prop="experimentalStatus" label="是否符合实验">
        <template slot-scope="{row}">{{ row.experimentalStatus == 1 ? "符合要求" : "未符合要求" }}</template>
      </el-table-column> -->
      <!-- <el-table-column width="150" align="center" prop="wardMame" label="区域"></el-table-column> -->
      <el-table-column width="300" align="center" prop="inspectionUnit" label="送检单位"
        show-overflow-tooltip></el-table-column>
      <el-table-column width="150" align="center" prop="departmentName" label="科室大类"></el-table-column>
      <!-- <el-table-column width="150" align="center" prop="name" label="科室小类"></el-table-column> -->
      <!-- <el-table-column width="150" align="center" prop="name" label="小类说明"></el-table-column> -->
      <el-table-column width="100" align="center" prop="applyDoctorName" label="送检医生"></el-table-column>
      <el-table-column width="120" align="center" prop="doctorPhone" label="医生电话"></el-table-column>
      <el-table-column width="100" align="center" prop="submissionReportPerson" label="提交报告人"></el-table-column>
      <el-table-column width="160" align="center" prop="submissionReportDate" label="提交报告时间"></el-table-column>
      <el-table-column width="100" align="center" prop="reportPerson" label="上传报告人"></el-table-column>
      <el-table-column width="160" align="center" prop="reportDate" label="上传报告时间"></el-table-column>
      <el-table-column width="150" align="center" label="发送报告状态">
        <template slot-scope="{row}">
          {{ mainStateObj[row.mainState] }}
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" prop="resultDna" label="DNA结果">
      </el-table-column>
      <el-table-column width="150" align="center" prop="resultDnaOn" label="DNA检出病原"></el-table-column>
      <el-table-column width="150" align="center" prop="resultRna" label="RNA结果"></el-table-column>
      <el-table-column width="150" align="center" prop="resultRnaOn" label="RNA检出病原"></el-table-column>
      <!-- <el-table-column width="150" align="center" prop="dnaReporting" label="DNA报告" show-overflow-tooltip>
        <template slot-scope="{row}">
          <a :href='row.dnaReporting' target="blank" style="color:#0186ef" v-show="row.dnaReporting">报告附件</a>
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" prop="rnaReporting" label="RNA报告" show-overflow-tooltip>
        <template slot-scope="{row}">
          <a :href='row.rnaReporting' target="blank" style="color:#0186ef" v-show="row.rnaReporting">报告附件</a>
        </template>
      </el-table-column> -->
      <el-table-column width="200" align="center" prop="remark" label="备注"></el-table-column>

      <el-table-column align="center" label="操作" width="330" fixed="right">
        <template slot-scope="scope">
          <div class="czDiv" style="font-size:14px">
            <el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess" :on-exceed="handleExceed"
               accept=".pdf" name="file" :headers="upload.headers"
              :show-file-list="false">
              <!-- :disabled="uploadDisabled" -->
              <span style="color:#0186ef;cursor:pointer"
                @click="addReport(scope.row.stateId, scope.row.mainState)">提交报告</span>
            </el-upload>
            <span style="color:#0186ef;cursor:pointer"
              @click="submitReport(scope.row.stateId, scope.row.mainState)">上传报告到LRP</span>
            <span style="color:#0186ef;cursor:pointer" @click="lookReport(scope.row.stateId, scope.row)">查看报告</span>
            <span style="color:#0186ef;cursor:pointer" @click="edit(scope.row)">编辑</span>
            <span v-show="(scope.row.isVoid == 0)" style="color:#0186ef;cursor:pointer"
              @click="nullify(scope.row.id, scope.row.stateId, scope.row)">作废</span>
            <span v-show="scope.row.isVoid == 1" style="color:#0186ef;cursor:pointer"
              @click="toEnabled(scope.row)">启用</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="height:80px"></div>
    <div class="block">
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="listTotal"
          background></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="importDialog" title="excel导入" width="1200px">
      <div class="importButton">
        <!-- daoru -->
        <div style="display:flex">
          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="true">
            <el-button size="mini" type="primary">选择Excel</el-button>
          </el-upload>
          <el-button size="mini" type="primary" @click="submitFileForm" style="margin-left:30px">提交</el-button>
        </div>
        <!-- muban -->
        <div>
          <span style="color:red;margin-right:10px">温馨提示:每次导入总数限制在500条以内</span>
          <el-button size="mini" type="primary" @click="importTemplate">模板下载</el-button>
        </div>
      </div>
      <el-table ref="multipleTable" :data="importData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" border :header-cell-style="{
          background: '#ebebeb'
        }" highlight-current-row :row-class-name="rowStyle" v-loading="loading">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <!-- <el-table-column align="center" prop="exceptionMsg" label="异常信息" show-overflow-tooltip></el-table-column> -->
        <el-table-column align="center" prop="barcodeCode" label="条码号"></el-table-column>
        <el-table-column align="center" prop="sampleNumber" label="分析样本编号"></el-table-column>
        <!-- <el-table-column width="150" v-for="(item) in listTitle" :key="item.id" :label="item.label" align="center"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.technicalManagement && scope.row.technicalManagement[item.label] }}</span>
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="dnaResult" label="DNA结果"></el-table-column>
        <el-table-column align="center" prop="dnaDetectablePathogen" label="DNA检出病原"></el-table-column>
        <el-table-column align="center" prop="rnaResult" label="RNA结果"></el-table-column>
        <el-table-column align="center" prop="rnaDetectablePathogen" label="RNA检出病原"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="importDialog = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="nullifyDialog" style="margin-top:15vh;" title="提示" width="500px">
      <el-form :model="ruleForm2" :rules="rules2" class="demo-ruleForm" ref="ruleForm2" :inline="true">
        <el-form-item label="请输入作废原因" prop="dictReasonId">
          <el-select v-model="ruleForm2.dictReasonId" placeholder="请选择" style="width:320px">
            <el-option v-for="item in Arr.reasonNameArr" :key="item.id" :label="item.reasonName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="nullifyDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="sureToNullify('ruleForm2')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑/重xx -->
    <el-dialog :visible.sync="dialogVisible" width="750px" title="微生物解读：编辑">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm" :inline="true"
        size="mini">
        <el-form-item label="条码号">
          <el-input clearable style="width:210px" v-model="ruleForm.barcodeCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-input clearable style="width:210px" v-model="ruleForm.projectTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="实验编号">
          <el-input clearable style="width:210px" v-model="ruleForm.experimentNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="样本状态">
          <el-input clearable style="width:210px" v-model="arr.mainStateObj[ruleForm.mainState]" disabled></el-input>
        </el-form-item>
        <el-form-item label="分析样本编号">
          <el-input clearable style="width:210px" v-model="ruleForm.analyzeSampleNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="分析批次号">
          <el-input clearable style="width:210px" v-model="ruleForm.analyzeBatchNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="录入时间">
          <el-input clearable style="width:210px" v-model="ruleForm.registerCreateDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="测序日期">
          <el-input clearable style="width:210px" v-model="ruleForm.a" disabled></el-input>
        </el-form-item>
        <el-form-item label="核酸类型">
          <el-input clearable style="width:210px" v-model="ruleForm.nucleicTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="样本类型">
          <el-input clearable style="width:210px" v-model="ruleForm.sampleTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="送检姓名">
          <el-input clearable style="width:210px" v-model="ruleForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="送检单位">
          <el-input clearable style="width:210px" v-model="ruleForm.inspectionUnit" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="DNA结果">
          <el-input clearable style="width:210px" v-model="ruleForm.dnaResults"></el-input>
        </el-form-item>
        <el-form-item label="DNA检出病源">
          <el-input clearable style="width:210px" v-model="ruleForm.dnaDetectablePathogen"></el-input>
        </el-form-item>
        <el-form-item label="RNA结果">
          <el-input clearable style="width:210px" v-model="ruleForm.rnaResults"></el-input>
        </el-form-item>
        <el-form-item label="RNA检出病源">
          <el-input clearable style="width:210px" v-model="ruleForm.rnaDetectablePathogen"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="DNA报告">         
          <el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess2" :on-exceed="handleExceed"
              :before-upload="beforeAvatarUpload" accept=".pdf" name="file" :headers="upload.headers" 
              :show-file-list="false">
              <el-input style="width:210px" v-model="ruleForm.dnaReporting"  placeholder="请上传文件" ></el-input>
            </el-upload> -->
        <!-- <el-input clearable style="width:210px" v-model="ruleForm.dnaReporting"></el-input> -->
        <!-- </el-form-item> -->
        <!-- <el-form-item label="RNA报告">
          <el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess3" :on-exceed="handleExceed"
              :before-upload="beforeAvatarUpload" accept=".pdf" name="file" :headers="upload.headers" 
              :show-file-list="false">
          <el-input  style="width:210px" v-model="ruleForm.rnaReporting" placeholder="请上传文件"></el-input>
        </el-upload> -->
        <!-- <el-select style="width:210px" v-model="platformType" placeholder="请选择" >
            <el-option v-for="item in platformTypeArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select> -->
        <!-- </el-form-item> -->
        <el-form-item label="作废原因" prop="remark">
          <el-input type="textarea" clearable v-model="ruleForm.reasonName" disabled style="width:542px"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" clearable v-model="ruleForm.remark" style="width:542px"></el-input>
        </el-form-item>
        <el-menu class="el-menu-vertical-demo" :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title">
              <span>临床信息</span>
            </template>
            <el-form :inline="true" label-width="100px">


              <el-form-item label="白细胞(10⁹/L)">
                <el-input style="width:210px" v-model="ruleForm.whiteBloodCells"></el-input>
              </el-form-item>


              <el-form-item label="中性粒(%)">
                <el-input style="width:210px" v-model="ruleForm.neutralGrain"></el-input>
              </el-form-item>


              <el-form-item label="淋巴细胞(%)">
                <el-input style="width:210px" v-model="ruleForm.lymphocyte"></el-input>
              </el-form-item>



              <el-form-item label="CRP(mg/L)">
                <el-input style="width:210px" v-model="ruleForm.crp"></el-input>
              </el-form-item>



              <el-form-item label="PCT(mg/L)">
                <el-input style="width:210px" v-model="ruleForm.pct"></el-input>
              </el-form-item>



              <el-form-item label="前端备注">
                <el-input style="width:210px" v-model="ruleForm.frontendNote"></el-input>
              </el-form-item>



              <el-form-item label="提取浓度">
                <el-input style="width:210px" v-model="ruleForm.extractionConcentration"></el-input>
              </el-form-item>



              <el-form-item label="宿主率">
                <el-input style="width:210px" v-model="ruleForm.rateOfHost"></el-input>
              </el-form-item>


              <el-form-item label="主诉">
                <el-input style="width:210px" v-model="ruleForm.principalComplaint"></el-input>
              </el-form-item>



              <el-form-item label="临床诊断">
                <el-input style="width:210px" v-model="ruleForm.clinicalDiagnosis"></el-input>
              </el-form-item>


              <el-form-item label="用药">
                <el-input style="width:210px" v-model="ruleForm.medication"></el-input>
              </el-form-item>


              <el-form-item label="重点病原">
                <el-input style="width:210px" v-model="ruleForm.focusOnPathogen"></el-input>
              </el-form-item>



              <el-form-item label="鉴定结果">
                <el-input style="width:210px" v-model="ruleForm.cultureIdentificationResults"></el-input>
              </el-form-item>


              <el-form-item label="发病时长">
                <el-input style="width:210px" v-model="ruleForm.onsetTime"></el-input>
              </el-form-item>


              <el-form-item label="DNA结果">
                <el-input style="width:210px" v-model="ruleForm.resultDna"></el-input>
              </el-form-item>


              <el-form-item label="DNA检出病原">
                <el-input style="width:210px" v-model="ruleForm.resultDnaOn"></el-input>
              </el-form-item>


              <el-form-item label="RNA结果">
                <el-input style="width:210px" v-model="ruleForm.resultRna"></el-input>
              </el-form-item>


              <el-form-item label="RNA检出病原">
                <el-input style="width:210px" v-model="ruleForm.resultRnaOn"></el-input>
              </el-form-item>


            </el-form>
          </el-submenu>
        </el-menu>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="resetRegister('ruleForm')">取消</el-button>
        <el-button size="mini" type="primary" @click="submitRegister('ruleForm')">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="reportDialog" title="提示" width="1500px" style="margin-top:0vh">
      <!-- <el-image title='点击查看全部内容' :src="coverUrl" @click="windowOpen" style="cursor:pointer"></el-image> -->
      <iframe id='content' :src='reportUrl' style="width:100%;height:80vh" v-if="reportUrl"></iframe>
      <!-- <span slot="footer" class="dialog-footer"> -->
        <!-- <el-button size="mini" @click="reportDialog = false">关闭</el-button> -->
      <!-- </span> -->
    </el-dialog>
    <!-- 回退 -->
    <el-dialog :visible.sync="returnDialog" width="750px" title="回退申请" class="returnForm">
      <el-form :model="returnData" :rules="rules3" ref="ruleForm3" label-width="110px" class="demo-ruleForm"
        :inline="true">
        <el-form-item label="条码号">
          <el-input clearable style="width:210px" v-model="returnData.barcodeCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-input clearable style="width:210px" v-model="returnData.projectTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="实验编号">
          <el-input clearable style="width:210px" v-model="returnData.experimentNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="样本状态">
          <el-input clearable style="width:210px" v-model="arr.mainStateObj[returnData.mainState]" disabled></el-input>
        </el-form-item>
        <el-form-item label="提取样本编号">
          <el-input clearable style="width:210px" v-model="returnData.analyzeSampleNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="提取批次号">
          <el-input clearable style="width:210px" v-model="returnData.analyzeBatchNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="核酸类型">
          <el-input clearable style="width:210px" v-model="returnData.nucleicAcidName" disabled></el-input>
        </el-form-item>
        <el-form-item label="样本类型">
          <el-input clearable style="width:210px" v-model="returnData.sampleTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="送检姓名">
          <el-input clearable style="width:210px" v-model="returnData.submitName" disabled></el-input>
        </el-form-item>
        <el-form-item label="送检单位">
          <el-input clearable style="width:210px" v-model="returnData.inspectionUnit" disabled></el-input>
        </el-form-item>
        <el-form-item label="回退环节" prop="flowBackState">
          <el-radio-group v-model="returnData.flowBackState">
            <el-radio :label="2">入库</el-radio>
            <el-radio :label="3">提取</el-radio>
            <el-radio :label="4">建库</el-radio>
            <el-radio :label="5">测序</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回退原因" prop="fallbackReason">
          <!-- <el-select v-model="returnData.fallbackReason" placeholder="请选择" style="width:210px">
          <el-option v-for="item in backReasonList" :key="item.id" :label="item.backReason" :value="item.backReason">
          </el-option>
        </el-select> -->
          <el-input clearable v-model="returnData.fallbackReason" placeholder="请输入回退原因" style="width:210px"></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="resetRegister('ruleForm3')">取消</el-button>
        <el-button size="mini" type="primary" @click="submitRegister3('ruleForm3')">确定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>
      
<script>
import {returnApply} from "@/api/technologyManage/index.js";
import { manageBackList, manageBackAdd } from '@/api/comprehensiveSearchManage/fallback.js'
import { voidPlaceOn, delPlaceOn, manageOperation } from '@/api/commonArr/index.js'
import { microorganismReadList, addReport, getAddReport, submitReport, editMicroorganismRead, microorganismSubmitExcel, microorganismExportTemplate } from "@/api/reportReadManage/index.js";
import { getToken } from "@/utils/auth";
import { arr, Arr } from "@/utils/data.js";
import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
export default {
  data() {
    return {
      imgFiles: [],
      pdfName: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      backReasonList: [],
      value1: [],
      value2: [],
      multipleSelection: [],

      ids: [],
      tableData: [],
      dialogVisible: false,
      rules: {
        name: [{ required: true, Message: "请输入名称", trigger: "blur" }]
      },
      ruleForm: {},
      nullifyDialog: false,
      importDialog: false,
      uploadHeader: {
        Authorization: ""
      },
      reportDialog: false,
      params: {
        pageNum: 1,
        pageSize: 20,
        projectType: "",
        sampleType: "",
        nucleicAcidType: "",
        // sampleState: ""
        subState: ''
      },
      mainStateObj: {
        1: "已录入",
        2: "已登记",
        3: "已入库",
        4: "已提取",
        5: "已建库",
        6: "已测序",
        7: "已分析",
        8: "已初审",
        9: "已确认初审",
        10: "已复审",
        11: "已提交",
        12: "已上传",
        13: "不上传"
      },
      listTotal: 0,
      Arr: {},
      arr: {},
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/process/analyze/importDataList"
      },
      importData: [],
      ruleForm2: {},
      returnStateObj: {
        0: 40,
        1: 50,
        2: 70,
        3: 60
      },
      loading: false,
      row: {},
      rules2: {
        dictReasonId: [
          { required: true, message: "请输入作废原因", trigger: "change" }
        ]
      },
      id: "",
      dictReasonId: '',
      stateId: '',
      returnData: {},
      rules3: {
        fallbackReason: [
          { required: true, message: "请输入回退原因", trigger: "blur" }
        ],
        flowBackState: [
          { required: true, message: "请选择回退环节", trigger: "change" }
        ]
      },
      returnDialog: false,
      heights: undefined,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      // fileList: []
      reportUrl: '',
      // coverUrl: "https://pic.imgdb.cn/item/638e1ba3b1fccdcd360cf95b.png",
      uploadDisabled: true,
      sampleTypeList: [],
      projectTypeList: [],
      restaurants: [],
    };
  },
  created() {
    console.log(process.env.VUE_APP_BASE_API);
    this.uploadHeader.Authorization = `Bearer ${getToken()}`;
  },
  methods: {
    //  处理pdf
     handlePdf(evt) {
      // console.log(evt);
      let that = this;
      let file = evt.target.files[0];
      this.pdfName = file.name.substring(0, file.name.lastIndexOf("."));
      var reader = new FileReader();
      reader.readAsDataURL(file); //将文件读取为 DataURL
      reader.onload = function () { //文件读取成功完成时触发
        const loadingTask = pdfjs.getDocument(reader.result)
        loadingTask.promise.then((pdf) => {
          console.log(pdf);
          var pageNum = pdf.numPages;
          console.log("页数:" + pageNum);

          //准备图片
          // for (let i = 1; i <= pageNum; i++) {
          //   let one = i;
          //   that.imgFiles.push(one);
          // }
          that.imgFiles.push(1) //只读取第一张图片！！！
          console.log(that.imgFiles)
          //处理
          for (let i = 1; i <= pageNum; i++) {
            pdf.getPage(i).then((page) => {
              const canvas = document.getElementById('pdf_canvas_' + i);
              const ctx = canvas.getContext('2d')
              const viewport = page.getViewport({ scale: 4 })
              canvas.height = viewport.height;
              canvas.width = viewport.width;
              const destWidth = 398;
              canvas.style.width = destWidth + 'px';
              canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
              page.render({
                canvasContext: ctx,
                viewport,
              })
            })
          }
        })
      }
    },
    // windowOpen() {
    //   window.open(this.reportUrl)
    // },
    addReport(stateId, mainState) {
      this.stateId = stateId
      if (mainState >= 10) {
        this.uploadDisabled = false

      }
      // else{
      //   this.uploadDisabled=true
      //   this.$message.error('请先完成复审')
      // }


    },
    // 上传成功回调
    handleUploadSuccess(res) {
      console.log("res:", res)
      this.reportUrl = res.data.url
      let params = {
        reportUrl: this.reportUrl,
        stateId: this.stateId
      }
      addReport(params).then(() => {
        this.$message.success('提交成功')
        this.voidPlaceOn2()
        this.getList()
      })
    },
    handleUploadSuccess2(res) {
      // this.ruleForm.dnaReportingName=res.data.fileName
      this.ruleForm.dnaReporting = res.data.url
      this.$message.success('上传成功')
      // console.log(res);
    },
    handleUploadSuccess3(res) {
      // this.ruleForm.dnaReportingName=res.data.fileName
      this.ruleForm.rnaReporting = res.data.url
      this.$message.success('上传成功')
      // console.log(res);
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    // 下拉框
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        this.sampleTypeList,
        this.projectTypeList,
        [
          { value: "aaa", address: "长宁区新渔路144号" },
          {
            value: "bbb",
            address: "上海市长宁区淞虹路661号"
          },
          {
            value: "ccc",
            address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
          }
        ]
      ];
      return array;
    },
    handleSelectSample(item) {
      this.params.sampleType = item.id
    },
    handleSelectProject(item) {
      this.params.projectType = item.id
    },
    // 聚焦下拉框时
    change(i) {
      this.restaurants = this.loadAll()[i];
      // console.log(this.restaurants);
    },
    // beforeAvatarUpload(file) {
    //     const isJPG = file.type === 'pdf';
    //     // const isLt2M = file.size / 1024 / 1024 < 2;

    //     if (!isJPG) {
    //       this.$message.error('上传头像图片只能是 pdf 格式!');
    //       return false
    //     }
    //     // if (!isLt2M) {
    //     //   this.$message.error('上传头像图片大小不能超过 2MB!');
    //     // }
    //     return true ;
    //   },
    reset() {
      this.params = {
        projectType: "",
        sampleType: "",
        nucleicAcidType: "",
        sampleState: "",
        pageSize: 20,
        pageNum: 1
      };
      this.value1 = []
      this.value2 = []
      this.getList()
    },
    // 表格复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map(item => item.id);
    },
    // 编辑界面
    edit(row) {
      this.ruleForm = row
      this.dialogVisible = true;
    },

    // 作废
    nullify(id, stateId, row) {
      this.id = id
      this.stateId = stateId
      this.ruleForm = row
      this.row = row
      this.nullifyDialog = true;
    },
    voidPlaceOn() {
      voidPlaceOn({ stateId: this.stateId, status: 0 })
    },
    voidPlaceOn2() {
      voidPlaceOn({ stateId: this.stateId, status: 1 })
    },
    // 确认作废
    // sureToNullify() {
    //   toVoid({
    //     dictReasonId: this.dictReasonId,
    //     id: this.id
    //   }).then(() => {
    //     this.$message.success("已作废");
    //     this.nullifyDialog = false;
    //     this.getList();
    //     this.voidPlaceOn()
    //   });
    // },
    toEnabled(row) {
      this.$confirm("是否确认启用?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.ruleForm = row
        this.ruleForm.isVoid = 0
        editMicroorganismRead(this.ruleForm).then(() => {
          this.$message.success("启用成功");
          this.getList();
          delPlaceOn(row.stateId)
        });
      });
    },
    //编辑
    submitRegister(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          editMicroorganismRead(this.ruleForm).then(() => {
            this.$message.success('编辑成功')
          })
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resetRegister(formName) {
      this.$refs[formName].resetFields(); //清空
      this.dialogVisible = false;
      this.returnDialog = false;
      // this.ruleForm.dnaReporting=''
      // this.ruleForm.rnaReporting=''
      this.getList()
    },

    handleImport() {
      this.importDialog = true;
    },

    handleExport(e) {
      var different = ''
      var params = ''
      if (e === 'now') {
        different = '当前'
        params = this.params //对应接口参数
      } else if (e === 'all') {
        different = '所有'
        params = null
      } else {
        return
      }
      let that = this
      let loading
      // const queryParams = this.params;
      this.$confirm("是否确认导出" + different + "数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(
          function () {
            loading = that.$loading({
              lock: true,
              text: '导出中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            microorganismReadList(params).then((response) => {
              let mydata = [
                [
                  '序号',
                  '条码号',
                  '项目类型',
                  '实验编号',
                  '样本状态',
                  '分析样本编号',
                  '分析批次号',
                  '分析序号',
                  '录入时间',
                  '入库日期',
                  'DNA报告日期',
                  'RNA报告日期',
                  '受检者姓名',
                  '受检者性别',
                  '受检者年龄',
                  '样本类型大类',
                  '样本类型小类',
                  '小类说明',
                  '检测流程',
                  '是否符合实验',
                  '区域',
                  '送检单位',
                  '科室大类',
                  '科室小类',
                  '小类说明',
                  '送检医生',
                  '医生电话',
                  '提交报告人',
                  '提交报告时间',
                  '上传报告人',
                  '上传报告时间',
                  '发送报告状态',
                  'DNA结果',
                  'DNA检出病原',
                  'RNA结果',
                  'RNA检出病原',
                  'DNA报告',
                  'RNA报告',
                  '备注',
                ],
                ...response.rows.map((item, index) => ([
                  index + 1,
                  item.barcodeCode,
                  item.projectTypeName,
                  item.experimentNumber,
                  // item.mainState === 6 ? that.analyzeSubStateName[item.mainState] : that.mainStateName[item.mainState],
                  that.mainStateObj[item.mainState],
                  item.analyzeSampleNumber,
                  item.analyzeBatchNumber,
                  item.analyzeNumber,
                  item.registerCreateDate,
                  item.inputDate,
                  item.dnaReportDate,
                  item.rnaReportDate,
                  item.name,
                  item.targetSex,
                  item.targetAge,
                  item.name,
                  item.name,
                  that.mainStateObj[item.mainState],
                  item.experimentalStatus == 1 ? '符合要求' : '未符合要求',
                  item.wardMame,
                  item.inspectionUnit,
                  item.departmentName,
                  item.name,
                  item.name,
                  item.applyDoctorName,
                  item.doctorPhone,
                  item.name,
                  item.submissionReportDate,
                  item.name,
                  item.reportDate,
                  item.name,
                  item.dnaResults,
                  item.dnaDetectablePathogen,
                  item.rnaResults,
                  item.rnaDetectablePathogen,
                  item.dnaReporting,
                  item.rnaReporting,
                  item.remark,
                ]))
              ]
              let requireMerge = []
              that.$util.createxlsx({
                mydata,
                fileName: '解读报告列表',
                dataList: response.rows,
                type: 'orderId',
                requireMerge,
                loading
              })
            })
          }).catch(function () { })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageNum = val;
      this.getList();
    },
    getList() {
      this.loading = true
      microorganismReadList(this.params).then(res => {
        this.tableData = res.rows;
        this.listTotal = res.total;
        this.loading = false
      });
    },
    handleCommand(command) {
      this.params.pageSize = command
      this.handleExport()
    },
    submitReport(stateId, mainState) {
      // if(mainState<10){
      //   // this.uploadDisabled=true
      //   this.$message.error('请先完成复审')
      //   return
      // }
      this.$confirm("是否上传该报告到LRP?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        getAddReport({ stateId }).then(res => {
          this.reportUrl = res.data.reportUrl
        }).then(() => {
          submitReport({
            stateId,
            reportUrl: this.reportUrl
          }).then(() => {
            this.$message({
              type: "success",
              message: "上传成功!"
            })
            voidPlaceOn({ stateId, status: 1 })
            this.getList()
          })
        })
      });
    },
    lookReport(stateId, row) {
      if (row.mainState < 11) {
        this.$message.error('暂无数据')
        return
      }
      this.reportDialog = true
      getAddReport({ stateId }).then(res => {
        // console.log(res);
        this.reportUrl = res.data.reportUrl
      })

    },
    timeChange1() {
      if (!this.value1) {
        this.value1 = []
      }
      this.params.startRegisterTime = this.value1[0];
      this.params.endRegisterTime = this.value1[1];
    },
    timeChange2() {
      if (!this.value2) {
        this.value2 = []
      }
      this.params.startAnalyzeTime = this.value2[0];
      this.params.endAnalyzeTime = this.value2[1];
    },
    // 模板下载
    importTemplate() {
      microorganismExportTemplate().then(res => {
        this.download(res.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log(response);
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.importData = response.data;
    },
    submitFileForm() {
      this.$confirm("是否提交选中数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        microorganismSubmitExcel({ importData: this.multipleSelection }).then(() => {
          this.$message.success("提交成功");
          this.multipleSelection = [];
          this.importDialog = false
          this.getList()
          this.importData = []
        });
      });
    },
    rowStyle({ row }) {
      var arr = this.ids;
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return "rowStyle";
        }
      }
    },
    sureToNullify(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.isVoid = 1
          editMicroorganismRead(this.ruleForm, {
            dictReasonId: this.ruleForm2.dictReasonId,
            id: this.id,
          }).then(() => {
            this.$message.success("已作废");
            this.nullifyDialog = false;
            this.getList();
            this.voidPlaceOn()
            this.row.status = 0
            this.row.operationStatus = 0
            this.row.professionalGroup = this.row.professionalGroupId
            this.row.entryDate = this.row.inputDate
            this.row.sampleType = this.row.sampleTypeId
            this.row.registrationTime = this.row.registerCreateDate
            this.row.projectType = this.row.projectTypeId
            manageOperation(this.row)
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitRegister3(formName) {
      const data = {
        fallbackReason: this.returnData.fallbackReason,
        flowBackState: this.returnData.flowBackState,
        stateId: this.returnData.stateId
      };
      this.$refs[formName].validate(valid => {
        if (valid) {
          returnApply(data).then(() => {
            this.$message.success("回退成功");
            this.returnDialog = false;
            this.getList();
            this.multipleSelection[0].backReason = this.returnData.fallbackReason
            // this.multipleSelection[0].status = this.returnData.flowBackState
            this.multipleSelection[0].status = this.returnStateObj[this.multipleSelection[0].analyzeState]
            this.multipleSelection[0].projectTypeId = this.multipleSelection[0].projectType
            this.multipleSelection[0].nucleicAcidTypeId = this.multipleSelection[0].nucleicAcidType
            this.multipleSelection[0].platformTypeId = this.multipleSelection[0].platformType
            this.multipleSelection[0].sampleTypeId = this.multipleSelection[0].sampleType
            this.multipleSelection[0].nucleicAcidTypeName = this.multipleSelection[0].nucleicAcidName
            manageBackAdd(this.multipleSelection[0])
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    returnBtn() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选内容");
        return;
      }
      if (this.multipleSelection.lenght > 1) {
        this.$message.error("至多选一项");
        return;
      }
      this.returnDialog = true;
      this.returnData = this.multipleSelection[0];
      manageBackList({ pageNum: 1, pageSize: 999 }).then(res => {
        this.backReasonList = res.rows
      })
    },
    getDefaultDate() {
      var now = new Date();
      var date = now.getDate();
      // now.setDate(date - 1);  //获取前一天
      var y = now.getFullYear();
      var m = (now.getMonth() + 1).toString().padStart(2, "0");
      var d = now.getDate().toString().padStart(2, "0");
      var defaultDate = y + "-" + m + "-" + d + ' ' + '00:00:00';

      var defaultDate2 = y + "-" + m + "-" + d + ' ' + '23:59:59';
      this.$set(this.value1, 0, defaultDate),
        this.$set(this.value1, 1, defaultDate2)
      // this.$set(this.value2, 0, defaultDate),
      //   this.$set(this.value2, 1, defaultDate2)
      this.timeChange1()
      // this.timeChange2()
    },
    watchTableHights() {
      this.$nextTick(() => {
        // 根据浏览器高度设置初始高度
        this.heights =
          window.innerHeight - this.$refs.refsTable.offsetHeight - 150;
        // 监听浏览器高度变化，修改表格高度
        window.onresize = () => {
          this.heights =
            window.innerHeight - this.$refs.refsTable.offsetHeight - 150;
        };
      });
    }
  },
  created() {
    this.getDefaultDate()
    console.log(Arr);
    Arr.sampleTypeArr.map(el => {
      this.sampleTypeList.push({
        value: el.name,
        id: el.id
      })
    })
    Arr.projectTypeArr.map(el => {
      this.projectTypeList.push({
        value: el.name,
        id: el.id
      })
    })
  },
  mounted() {
    this.watchTableHights()
    this.getList();

    this.Arr = Arr;
    this.arr = arr;
  }
};
</script>
      
<style lang="scss" scoped>
.packages {
  padding-left: 10px;

  // position: relative;
  .czDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
  }

  .returnForm {
    .el-form-item {
      margin-bottom: 17px;
    }
  }

  .importButton {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .block {
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    bottom: 20px;
    right: 20px;
    z-index: 99;
  }

  .el-row {
    display: flex;
    flex-wrap: wrap;
  }

  ::v-deep .el-table__body tr.current-row>td {
    background: #a8d6fe !important;
  }

  ::v-deep .el-table__body tr:hover>td {
    background: #a8d6fe !important;
  }

  ::v-deep .rowStyle {
    background-color: #a8d6fe !important;
  }

  .el-form-item {
    margin-bottom: 10px
  }

  .el-dialog__body {
    padding: 0px !important
  }

  .el-dialog__header {
    padding: 0px !important
  }

  //   .keywordCss{
  //     ::-webkit-input-placeholder{/*Webkit browsers*/
  // 	color:#999;
  // 	font-size:12px;
  //   transform:scale(0.8)
  // }
  // .el-input--medium .el-input__inner{
  //   padding:0
  // }
  //   }


}
</style>